<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 用户列表卡片 -->
    <el-card class="box-card">
      <!-- 部门查询还有问题 -->
      <el-form :inline="true" :model="userVO" class="demo-form-inline">
        <el-form-item label="部门" label-width="70px">
          <el-select
            clearable
            v-model="userVO.departmentName"
            @change="getUserList"
            @clear="getUserList"
            placeholder="请选择"
          >
            <el-option
              v-for="item in departmentNames"
              :key="item.name + ''"
              :label="item.name"
              :value="item.name"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span
                  class="el-tag el-tag--success el-tag--mini el-tag--plain"
                  >{{ item.total }}</span
                >
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px">
          <el-input
            clearable=""
            v-model="userVO.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="70px">
          <el-input
            clearable=""
            v-model="userVO.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="70px" style="margin-left: 25px">
          <el-radio v-model="userVO.sex" label="0">帅哥</el-radio>
          <el-radio v-model="userVO.sex" label="1">美女</el-radio>
          <el-radio v-model="userVO.sex" label="-2">全部</el-radio>
        </el-form-item>
        <el-form-item label="昵称" label-width="70px">
          <el-input
            clearable
            v-model="userVO.nickname"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" @click="resetUserVo"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-search" @click="getUserList"
            >查询</el-button
          >
          <el-button type="success" icon="el-icon-plus" @click="show"
            >添加</el-button
          >
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="userDatas"
        :loading="loading"
        size="small"
        style="width: 100%"
        border
        height="420"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0' }"
      >
        <el-table-column prop="id" label="#" width="50"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="100">
        </el-table-column>
        <el-table-column prop="sex" :formatter="showSex" width="100">
          <template slot-scope="scope">
            <el-tag size="small" type="success" v-if="scope.row.sex === 1"
              >帅哥</el-tag
            >
            <el-tag size="small" type="warning" v-else>美女</el-tag>
          </template>
        </el-table-column>
        <!-- 后端没有这个属性 记得修改 -->
        <el-table-column
          prop="departmentName"
          label="所属部门"
          sortable=""
          width="150"
        >
        </el-table-column>
        <el-table-column prop="birth" label="生日" sortable="" width="150">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" sortable="">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" sortable="">
        </el-table-column>
        <!-- 是否禁用 返回也有问题 -->
        <el-table-column prop="isban" label="是否禁用" width="100">
          <template slot-scope="scope">
            <!--  -->
            <el-switch
              v-model="scope.row.status"
              @change="changUserStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit-outline"
              @click="editUser(scope.row.id)"
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="delUser(scope.row.id)"
            ></el-button>
            <!-- 分配角色 hover 提示文字 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top"
            >
              <el-button
                type="warning"
                size="small"
                icon="el-icon-s-tools"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="添加用户" :visible.sync="addDialogVisiable" width="50%">
      <UserAdd @closeAddDialog="closeAddDialog"></UserAdd>
    </el-dialog>

    <el-dialog title="编辑用户" :visible.sync="editDialogVisiable" width="50%">
      <UserEdit @closeEditDialog="closeEditDialog" :id="editUserId"></UserEdit>
    </el-dialog>
  </div>
</template>

<script>
import {
  findUserList,
  updateUserStatus,
  deleteUser,
} from "../../api/system/user";
import { findAllDepartmentNames } from "../../api/system/department";
import UserAdd from "../users/UserAdd.vue";
import UserEdit from "../users/UserEdit.vue";
export default {
  name: "users",
  data() {
    return {
      loading: false,
      addDialogVisiable: false,
      editDialogVisiable: false,
      editUserId: null,
      size: 10,
      current: 1,
      total: 1000,
      userVO: {
        birth: "",
        createTime: "",
        departmentId: null,
        departmentName: "",
        email: "",
        id: 0,
        nickname: "",
        password: "",
        phoneNumber: "",
        sex: -1,
        status: false,
        username: "",
      },
      departmentName: "",
      userDatas: [],
      departmentNames: [],
    };
  },
  methods: {
    /**
     * 显示用户性别
     */
    showSex(row, column) {
      return row.sex === 1 ? "帅哥" : "美女";
    },
    // 修改用户状态
    async changUserStatus(row) {
      // 修改用户状态
      updateUserStatus(row.id, row.status).then((res) => {
        if (res.success) {
          this.$message.success("更新用户状态成功");
        } else {
          this.$message.error("更新用户状态失败");
        }
      });
    },
    async editUser(id) {
      // 编辑用户
      this.editDialogVisiable = true;
      this.editUserId = id;
    },
    async delUser(id) {
      // 删除用户
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser(id).then((res) => {
            if (res.success) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getUserList();
              this.getDepartmentNameList();
            } else {
              this.$message.error(res.data.errorMsg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetUserVo() {},
    getUserList() {
      // 调用后台接口
      findUserList(this.current, this.size, this.userVO).then((res) => {
        if (res.success) {
          // 成功
          this.current = res.data.data.current;
          this.password = res.data.data.size;
          this.total = res.data.data.total;
          this.userDatas = res.data.data.records;
        } else {
          // 失败
          return this.$message.error("获取用户列表失败:" + res.data.errorMsg);
        }
      });
    },
    getDepartmentNameList() {
      // 调用后台接口
      findAllDepartmentNames().then((res) => {
        console.log(res);
        if (res.success) {
          // 成功
          this.departmentNames = res.data;
          console.log(this.departmentNames);
        } else {
          this.$$message.error("获取部门列表失败:" + res.data.errorMsg);
        }
      });
    },
    show() {
      this.addDialogVisiable = true;
    },
    handleSizeChange(newSize) {
      this.size = newSize;
      this.getUserList();
    },
    handleCurrentChange(current) {
      this.current = current;
      this.getUserList();
    },
    closeAddDialog(msg) {
      this.addDialogVisiable = msg;
      this.getUserList();
      this.getDepartmentNameList();
    },
    closeEditDialog(msg) {
      this.editDialogVisiable = msg;
      this.getUserList();
      this.getDepartmentNameList();
    },
  },
  created() {
    // vue组件创建时调用
    this.getUserList();
    this.getDepartmentNameList();
  },
  components: {
    UserAdd,
    UserEdit,
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

/* .item {
  margin-bottom: 18px;
} */

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
